<template>
  <div class="app-container">
    <el-form
      :model="searchList"
      ref="queryForm"
      :inline="true"
      label-width="85px"
    >
      <el-form-item label="业务线" prop="bizCode">
        <el-select
          v-model="searchList.bizCode"
          style="width: 200px"
          placeholder="请先选择业务线"
          clearable
          filterable
          size="small"
          @keyup.enter.native="getList"
        >
          <el-option
            :label="dict.dictLabel"
            :value="dict.dictValue"
            v-for="dict in bizDisplayOptions"
            :key="dict.dictLabel"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务名称" prop="taskName">
        <el-input
          v-model="searchList.taskName"
          placeholder="请输入任务名称"
          clearable
          size="small"
          style="width: 200px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select
          v-model="searchList.state"
          style="width: 200px"
          placeholder="请先选择下载状态"
          clearable
          filterable
          size="small"
          @keyup.enter.native="getList"
        >
          <el-option
            :label="dict.dictLabel"
            :value="dict.dictValue"
            v-for="dict in downloadStatuesOptions"
            :key="dict.dictLabel"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @handleQuery="getList"
        @resetQuery="reset"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="downloadList"
      v-adaptive="{ bottomOffset: 50 }"
      height="100px"
    >
      <el-table-column
        min-width="110"
        type="index"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column label="业务线" min-width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.bizCode }} </span>
        </template>
      </el-table-column>
      <el-table-column label="任务名称" min-width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.taskName }} </span>
        </template>
      </el-table-column>
      <el-table-column label="文件名称" min-width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.fileName }} </span>
        </template>
      </el-table-column>
      <el-table-column label="文件格式" min-width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.fileType }} </span>
        </template>
      </el-table-column>
      <el-table-column label="文件大小" min-width="80" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.fileSize!=0">{{ scope.row.fileSize }}kb </span>
        </template>
      </el-table-column>
      <el-table-column label="任务模式" min-width="80" align="center">
        <template slot-scope="scope">
          <span
            >{{ statue(scope.row.taskMode, downloadTaskModeOptions) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="预执行时间" min-width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.planExecTime }} </span>
        </template>
      </el-table-column>
      <el-table-column label="完结时间" min-width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.finishTime }} </span>
        </template>
      </el-table-column>
      <el-table-column label="过期时间" min-width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.expireTime }} </span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        min-width="110"
        align="center"
        key="updateTime"
      >
        <template slot-scope="scope">
          <span>{{ statue(scope.row.state, downloadStatuesOptions) }} </span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="110"
        align="center"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope" v-if="scope.row.state == 100">
          <el-button
            size="mini"
            type="text"
            @click="downloadFile(scope.row)"
            v-if="!scope.row.isDownload"
          >
            下载</el-button
          >
          <span v-else>{{ scope.row.downloadTime }}秒后可再次下载</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="searchList.pageNum"
      :limit.sync="searchList.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getDownloadList } from "@/api/common/downloadCenter.js";
export default {
  name: "DownloadCenter",
  data() {
    return {
      searchList: {
        pageNum: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      // 列表数据
      downloadList: [],
      // 业务线字典
      bizDisplayOptions: [],
      // 下载状态字典
      downloadStatuesOptions: [],
      // 任务模式字典
      downloadTaskModeOptions: [],
    };
  },
  async created() {
    let resArr = await Promise.all([
      // 获取业务线字典
      this.getDicts("BAC_BIZ_DISPLAY"),
      // 获取下载状态字典
      this.getDicts("BAC_DOWNLOAD_STATUS"),
      // 获取任务模式字典
      this.getDicts("BAC_DOWNLOAD_TASK_MODE"),
    ]);
    this.bizDisplayOptions = resArr[0].data;
    this.downloadStatuesOptions = resArr[1].data;
    this.downloadTaskModeOptions = resArr[2].data;

    this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      getDownloadList(this.searchList).then((res) => {
        this.downloadList = res.data;
        this.total = res.total;
      });
    },
    // 下载
    downloadFile(row) {
      // 把row.expireTime变成时间戳
      let expireTime = new Date(row.expireTime).getTime();
      if (expireTime < new Date().getTime()) {
        this.$message.error("该文件已过期");
        return;
      }
      row.isDownload = true;
      row.downloadTime = 30;
      let timer = setInterval(() => {
        row.downloadTime--;
        if (row.downloadTime == 0) {
          clearInterval(timer);
          row.isDownload = false;
        }
        this.downloadList = [...this.downloadList];
      }, 1000);

      this.download(
        "system/download/downloadFile/" + row.taskId,
        {},
        `${row.fileName}.xlsx`
      );
    },
    // 重置
    reset() {
      this.searchList = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped></style>
